<template>
  <div class="dashboard-container">
    <div class="app-container">
      <head-tool>
        <template slot="after">
          <el-button type="primary" size="small" @click="showAdd('0', 1)">
            <i class="el-icon-plus"></i> 添加权限</el-button
          >
        </template>
      </head-tool>
      <!-- 表格 -->
      <el-card>
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{ children: 'children' }"
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="code" label="标识"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                v-if="row.type == 1"
                type="primary"
                size="small"
                @click="showAdd(row.id, 2)"
              >
                <i class="el-icon-plus"></i> 添加</el-button
              >
              <el-button type="info" size="small" @click="updataShow(row.id)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="delPermission(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 弹窗 -->
      <el-dialog :title="title" :visible.sync="showPermiss">
        <el-form
          :model="permissionForm"
          style="width:600px ;margin:0 auto"
          ref="perForm"
          :rules="rules"
        >
          <el-form-item label="权限名称：" prop="name" label-width="120px">
            <el-input v-model="permissionForm.name"></el-input>
          </el-form-item>
          <el-form-item label="权限标识：" prop="code" label-width="120px">
            <el-input v-model="permissionForm.code"></el-input>
          </el-form-item>
          <el-form-item label="权限描述：" label-width="120px">
            <el-input v-model="permissionForm.description"></el-input>
          </el-form-item>
          <el-form-item label="企业可见：" label-width="120px">
            <el-switch
              v-model="permissionForm.enVisible"
              active-text="可见"
              active-value="1"
              inactive-text="不可见"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outPer">取 消</el-button>
          <el-button type="primary" @click="addper">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getAllpermission,
  addpermission,
  updatePer,
  seekPer,
  delPer
} from '@/api/permission'
//导入递归
import { getDeptList } from '@/utils/index'
//
// import {} from ''
export default {
  name: 'per',
  data () {
    return {
      //表格数据
      tableData: [],
      //表单数据
      permissionForm: {},
      //弹窗显示
      showPermiss: false,
      //规则
      rules: {
        name: [{}],
        code: [{}]
      }
    }
  },
  created () {
    this.getpermissionList()
  },
  methods: {
    async getpermissionList () {
      let res = await getAllpermission()
      this.tableData = getDeptList(res.data, '0')
    },
    //取消
    outPer () {
      this.permissionForm = {}
      this.$refs.perForm.resetFields()
      this.showPermiss = false
    },
    //显示对话框
    showAdd (pid, type) {
      // 如果是1级，pid为'0',type为1
      // 如果是2级，pid为当前这行权限的id，type为2
      this.showPermiss = true
      this.permissionForm.type = type
      this.permissionForm.pid = pid
    },
    //表单里的确认事件
    addper () {
      this.$refs.perForm.validate(async v => {
        if (v) {
          if (this.permissionForm.id) {
            let res = await updatePer(this.permissionForm)
            console.log(res)
          } else {
            await addpermission(this.permissionForm)
          }
          this.$message.success('添加成功')
          //刷新页面
          this.getpermissionList()
          //关闭弹窗
          this.showPermiss = false
        }
      })
    },
    //显示编辑框并获取数据渲染到表单里
    async updataShow (id) {
      this.showPermiss = true
      let res = await seekPer(id)
      this.permissionForm = res.data
    },
    async delPermission (id) {
      try {
        await this.$confirm('此操作将永久删除权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delPer(id)
        this.$message.success('删除成功')
        this.getpermissionList()
      } catch {
        this.$message.success('取消成功')
      }
    }
  },
  computed: {
    title () {
      return this.permissionForm.id ? '编辑权限' : '新增权限'
    }
  }
}
</script>

<style></style>
